<template>
	<view class="pageWarp" :style="{backgroundImage: `url(${imgUrl}myBg.png)`}">
		<!-- 顶部导航条 -->
		<u-navbar title="个人中心" bgColor="transparent" titleStyle="color: #fff" leftIconColor="transparent" placeholder />
		<!-- 用户头像信息 -->
		<view class="userBox flex">
			<u-avatar :src="userInfo.avatar" size="140rpx" />
			<view style="font-size: 38rpx;margin-left: 10rpx;">{{ userInfo.nickname }}</view>
			<text @click="goRouter('/pagesSubPack/myCenter/myInfo')">前往完善资料</text>
			<u-icon name="arrow-right" color="#fff" size="24rpx" />
			<image :src="imgUrl + 'tips-icon.png'" mode="widthFix" class="tipsIcon" />
		</view>
		<!-- 我的余额 -->
		<view class="priceBox" :style="{backgroundImage: `url(${imgUrl}priceBg.png)`}">
			<text>我的余额(元)</text>
			<view class="flex">
				<text>{{ userInfo.money }}</text>
				<u-button color="#8f7162" shape="circle" size="small" text="充值" />
			</view>
		</view>
		<!-- 我的账户 -->
		<view class="menuBox">
			<view class="tit">我的账户</view>
			<view class="flex">
				<view v-for="(item, index) in accountLi" :key="index" @click="goRouter(item.url)" style="width: 20%;">
					<image :src="item.img" :style="{height: '50rpx', width: item.width ? item.width : '50rpx'}" />
					<view>{{ item.txt }}</view>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="menuBox">
			<view class="tit">我的服务</view>
			<view class="flex">
				<view v-for="(item, index) in servicLi" :key="index" @click="goRouter(item.menuLink)" style="width: 25%;">
					<image :src="item.menuIcon" style="width: 50rpx;height: 50rpx;" />
					<view>{{ item.menuName }}</view>
					<image
						v-if="item.menuName == '健康问卷' && !userInfo.is_questionnaire"
						:src="imgUrl + 'tips-icon.png'"
						mode="widthFix"
						class="tipsIcon"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { imgUrl } from "@/utils/baseUrl.js";
import { getMyInfo, getServeMenu } from "@/api/user.js";
export default {
	data() {
		return {
			imgUrl,
			userInfo: {},
			servicLi: [],
			accountLi: [
				{
					img: `${imgUrl}account22.png`,
					txt: "我的设备",
					url: "/pagesSubPack/myCenter/device",
					width: "61rpx",
				},
				{
					img: `${imgUrl}calorie.png`,
					txt: "燃烧卡路里",
					url: "/pagesSubPack/myCenter/fatBurning",
				}
			],
		}
	},
	onShow() {
		getMyInfo().then(res => this.userInfo = res) // 获取个人信息
		getServeMenu().then(res => this.servicLi = res) // 我的服务菜单列表
	},
	methods: {
		goRouter(url) {
			uni.navigateTo({ url })
		}
	}
}
</script>

<style lang="scss" scoped>
.pageWarp {
	height: 100vh;
	background-size: 100% 500rpx;
	background-repeat: no-repeat;
	padding: 20rpx;
}
.tipsIcon {
	position: absolute;
	width: 35rpx;
}
.userBox {
	position: relative;
	color: #fff;
	text {
		margin-left: auto;
		font-size: 22rpx;
	}
	image {
		right: 10rpx;
		top: 30rpx;
	}
}
.priceBox {
	font-size: 26rpx;
	height: 190rpx;
	border-radius: 20rpx;
	background-size: 100% 100%;
	padding: 20rpx 40rpx;
	margin-top: 40rpx;
	text {
		color: rgba(255, 243, 237, 0.8);
	}
	::v-deep .flex {
		margin-top: 46rpx;
		text {
			font-size: 45rpx;
			font-weight: bold;
		}
		.u-button {
			width: 130rpx;
			margin: 0 0 0 auto;
		}
	}
}
.menuBox {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx 30rpx 0 30rpx;
	margin-top: 20rpx;
	.tit {
	  color: #434343;
		margin-bottom: 30rpx;
	}
	.flex {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		text-align: center;
		flex-wrap: wrap;
		> view {
			position: relative;
			margin-bottom: 40rpx;
			view {
				margin-top: 10rpx;
			}
		}
	}
	.tipsIcon {
		top: -15rpx;
		right: 45rpx;
	}
}
</style>